<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>栏目显示</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
 		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  		<style>
  			.layui-form-label{width: 90px;}
  			.layui-input-block{margin-left: 125px;}
  			.layui-upload-img{width: 420px;height: 92px;margin: 0 10px 10px 0;}
  		</style>
	</head>
	<body>
		<body>
			<div class="layui-fluid">
				<div class="layui-card">
					<div class="layui-card-body" style="padding: 15px;">
						<form class="layui-form" action="" lay-filter="component-form-group" style="padding: 10px 0 0 0;">
							<div class="layui-form-item">
									<div  class="layui-inline">
										<label class="layui-form-label">编号</label>
							            <div class="layui-input-block">
							              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入编号" class="layui-input">
							            </div>
									</div>
									<div  class="layui-inline">
										<label class="layui-form-label">栏目标题</label>
									    <div class="layui-input-block">
							              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入栏目名称" class="layui-input">
							            </div>
									</div>
									<div  class="layui-inline">
										<button class="layui-btn">查询</button>
									</div>
						    </div>
						</form>
						<hr>
						<div class="layui-btn-group demoTable" style="margin-bottom: 5px;">
						  <button class="layui-btn" data-type="add">新增</button>
						  <!--<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
						  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
						  <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
						</div>
						<table class="layui-table" lay-data="{cellMinWidth: 80,height:472, url:'./data/clounmsdata.json', page:true, id:'idTest'}" lay-filter="demo">
						  <thead>
						    <tr>
						      <th lay-data="{type:'checkbox'}"></th>
						      <th lay-data="{field:'id', width:80, sort: true}">编号</th>
						      <th lay-data="{field:'columnName'}">栏目标题</th>
						      <th lay-data="{field:'position', width:120}">显示位置</th>
						      <th lay-data="{field:'order', width:80}">位置号</th>
						      <th lay-data="{ width:228, align:'center', toolbar: '#barDemo', fixed: 'right'}">操作</th>
						    </tr>
						  </thead>
						</table>
						<script type="text/html" id="barDemo">
						  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
						  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
						</script>
						<div id="colunms"  style="display: none;">
							<form class="layui-form" action="" lay-filter="component-form-group" style="margin: 10px;">
								<!--<div  class="layui-form-item">
									<label class="layui-form-label">所属门户网站</label>
									<div class="layui-input-block">
									    <select name="city" lay-verify="required">
									        <option value=""></option>
									        <option value="0">监督指挥公众服务门户网站</option>
									        <option value="1">社会治安综合治理公众服务门户网站</option>
									    </select>
									</div>
								</div>
								<div  class="layui-form-item">
									<label class="layui-form-label">所属目录</label>
									<div class="layui-input-block">
									    <select name="city" lay-verify="required">
									        <option value=""></option>
									        <option value="0">监督指挥公众服务门户网站</option>
									        <option value="1">社会治安综合治理公众服务门户网站</option>
									    </select>
									</div>
								</div>-->
								<div  class="layui-form-item">
						      		<label class="layui-form-label">显示栏目</label>
						      		<div class="layui-input-block">
									    <input type="radio" name="class" value="新闻动态" title="新闻动态">
									    <input type="radio" name="class" value="政务公开" title="政务公开">
									    <input type="radio" name="class" value="政策法规" title="政策法规">
									    <input type="radio" name="class" value="督查督办" title="督查督办">
									    <input type="radio" name="class" value="月度排行" title="月度排行">
									</div>
						      	</div>
						      	<div  class="layui-form-item">
						      		<label class="layui-form-label">栏目标题</label>
						      		<div class="layui-input-block">
									    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入自定义栏目名称" class="layui-input">
									</div>
						      	</div>
						      	<div class="layui-form-item">
						       		<div  class="layui-inline">
										<label class="layui-form-label">栏目位置号</label>
							            <div class="layui-input-block">
							              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入位置号" class="layui-input">
							            </div>
									</div>
									<div  class="layui-inline">
										<label class="layui-form-label">栏目显示位置</label>
									    <div class="layui-input-block">
									      <select name="city" lay-verify="required">
									        <option value=""></option>
									        <option value="0">左</option>
									        <option value="1">右</option>
									      </select>
									    </div>
									</div>
						       </div>
						       <div class="layui-form-item">
								    <div class="layui-input-block" style="text-align: center;margin-left: 0px;">
								      <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
								      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
								    </div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<script src="../../layuiadmin/layui/layui.js"></script>  
			<script>
				layui.use(['form','table','upload'], function(){
				  var form = layui.form;
				  var table = layui.table;
				  var $ = layui.jquery
	 			 ,upload = layui.upload;
				  
				  //普通图片上传
				  var uploadInst = upload.render({
				    elem: '#test1'
				    ,url: '/upload/'
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				      obj.preview(function(index, file, result){
				        $('#demo1').attr('src', result); //图片链接（base64）
				      });
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.code > 0){
				        return layer.msg('上传失败');
				      }
				      //上传成功
				    }
				    ,error: function(){
				      //演示失败状态，并实现重传
				      var demoText = $('#demoText');
				      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
				      demoText.find('.demo-reload').on('click', function(){
				        uploadInst.upload();
				      });
				    }
				  });
				  
				   //监听表格复选框选择
				  table.on('checkbox(demo)', function(obj){
				    console.log(obj)
				  });
				  //监听工具条
				  table.on('tool(demo)', function(obj){
				    var data = obj.data;
				    if(obj.event === 'detail'){
				      layer.msg('ID：'+ data.id + ' 的查看操作');
				    } else if(obj.event === 'del'){
				      layer.confirm('真的删除行么', function(index){
				        obj.del();
				        layer.close(index);
				      });
				    } else if(obj.event === 'edit'){
				      layer.alert('编辑行：<br>'+ JSON.stringify(data))
				    }
				  });
				  
				  var $ = layui.$, active = {
				    getCheckData: function(){ //获取选中数据
				      var checkStatus = table.checkStatus('idTest')
				      ,data = checkStatus.data;
				      layer.alert(JSON.stringify(data));
				    }
				    ,getCheckLength: function(){ //获取选中数目
				      var checkStatus = table.checkStatus('idTest')
				      ,data = checkStatus.data;
				      layer.msg('选中了：'+ data.length + ' 个');
				    }
				    ,isAll: function(){ //验证是否全选
				      var checkStatus = table.checkStatus('idTest');
				      layer.msg(checkStatus.isAll ? '全选': '未全选')
				    }
				  };
				  
				  $('.demoTable .layui-btn').on('click', function(){
				    var type = $(this).data('type');
				    active[type] ? active[type].call(this) : '';
				  });
				  
				  
				  	$('[data-type="add"]').on('click', function(){
						layer.open({
						  type: 1,
						  area: ['600px', '400px'],
						  fixed: false, //不固定
						  maxmin: true,
						  content: $('#colunms')
						});
					});
				});
			</script>
		</body>
	</html>
